<template>
  <div class="article-container">
    <button @click="goList">回到列表</button>
    <!-- 段落模块 -->
    <div v-for="(paragraph, pIndex) in data" :key="pIndex" class="paragraph-box">
      <!-- 段落文本 -->
      <div class="text-block">
        <span v-for="(word, wIndex) in paragraph" :key="wIndex" :class="{ 'polyphone': word.isPolyphone }"
          @click="handlePolyphoneClick(word, pIndex, wIndex)">
          <small class="pinyin">{{ word.pinyin || '　' }}</small>
          {{ word.word }}
        </span>
      </div>

      <!-- 朗读控制 -->
      <div class="audio-control">
        <button @click="toggleSpeech(pIndex)" :class="{ active: isSpeaking && currentPara === pIndex }">
          {{ isSpeaking && currentPara === pIndex ? '⏹ 停止' : '▶ 朗读' }}
        </button>
      </div>
    </div>

    <!-- 多音字选择弹窗 -->
    <div v-if="showPinyinModal" class="pinyin-modal">
      <div class="modal-content">
        <h3>{{ selectedWord.word }} 的拼音选择</h3>
        <div v-for="(pyString, index) in pinyinList" :key="index" class="pinyin-option" @click="selectPinyin(pyString)">
          {{ pyString }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="pinyin">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// 接收参数
const id = ref(route.query.id)
const title = ref(route.query.title)
let data = ref([])
//当前点击的word
let nowWord = ref({})

onMounted(() => {
  updateDate();
})






// 回到列表
const goList = () => {
  router.push('/articleList')
}










// 根据文章id获取data



let updateDate = async () => {
  try {
    const response = await axios.get('http://localhost:8080/word/getwordlistById', {
      params: {
        articleId: id.value,
      }
    })
    if (response.data.success) {
      data.value = response.data.data
    }
  } catch (error) {
    ElMessage.error('获取数据失败');
  }
}
// 语音合成相关
const synth = window.speechSynthesis
const isSpeaking = ref(false)
const currentPara = ref(null)
let currentUtterance = null

// 多音字相关
const showPinyinModal = ref(false)
const pinyinList = ref([])
const selectedWord = reactive({
  pIndex: -1,
  wIndex: -1,
  word: ''
})



// 处理多音字点击
const handlePolyphoneClick = async (word, pIndex, wIndex) => {
  if (!word.isPolyphone) return
  try {
    nowWord.value = word
    const response = await axios.get('http://localhost:8080/word/getPinyins', {
      params: {
        word: word.word,
      }
    })
    if (response.data.success) {
      pinyinList.value = response.data.data
    }
    Object.assign(selectedWord, {
      pIndex,
      wIndex,
      word: word.word
    })
    showPinyinModal.value = true
  } catch (e) {
    ElMessage.error('获取拼音失败');
  }
}

// 选择拼音
const selectPinyin  =async (pyString) => {
  //一会编写
  try {
    nowWord.value.pinyin = pyString
    const response = await axios.post('http://localhost:8080/word/updatePinyin',nowWord.value )
    if (response.data.success) {
      showPinyinModal.value = false
      ElMessage.success('成功选择拼音'+pyString);
    }else{
      showPinyinModal.value = false
      ElMessage.error('获取拼音失败');
      
    }
   
  
  } catch (e) { 
    showPinyinModal.value = false
    ElMessage.error('获取拼音失败');
  }
  
}

// 朗读控制
const toggleSpeech = (pIndex) => {
  if (isSpeaking.value && currentPara.value === pIndex) {
    stopSpeech()
  } else {
    startSpeech(pIndex)
  }
}

const startSpeech = (pIndex) => {
  stopSpeech()

  const text = data.value[pIndex].map(w => w.word).join('')
  const utterance = new SpeechSynthesisUtterance(text)

  // 配置语音参数[7](@ref)
  utterance.lang = 'zh-CN'
  utterance.rate = 0.9
  utterance.pitch = 1

  utterance.onend = () => stopSpeech()
  synth.speak(utterance)

  isSpeaking.value = true
  currentPara.value = pIndex
  currentUtterance = utterance
}

const stopSpeech = () => {
  if (synth.speaking) synth.cancel()
  isSpeaking.value = false
  currentPara.value = null
}
</script>

<style scoped>
.article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.paragraph-box {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-block {
  line-height: 3;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.text-block span {
  height: 20px;
  position: relative;
  margin: 0 2px;
  padding: 2px 10px;
  cursor: default;
  transition: all 0.2s;
}

.polyphone {
  background: #e3f2fd;
  border-radius: 4px;
  cursor: pointer !important;
}

.polyphone:hover {
  background: #bbdefb;
  transform: translateY(-2px);
}

.pinyin {
  position: absolute;
  top: -2.2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8em;
  color: #666;
}

.audio-control {
  text-align: right;
}

button {
  padding: 6px 12px;
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #1976d2;
}

button.active {
  background: #f44336;
}

/* 多音字弹窗 */
.pinyin-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
}

.pinyin-option {
  padding: 12px;
  margin: 8px 0;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.pinyin-option:hover {
  background: #e0e0e0;
}
</style>